<template>
  <div class="Main">
    <div class="MainTitle">订单列表</div>
    <div class="MianContent">
      <div style="display: flex; align-items: center; justify-content: space-between;">
        <div class="flex align-items">
          订单状态：
          <a-select
            style="width: 180px; margin-right: 20px"
            allowClear
            placeholder="请选择订单状态"
            v-model="status"
            @change="handleChange"
          >
            <a-select-option
              :value="item.value"
              v-for="(item, index) in orderStatus"
              :key="index"
            >
              {{ item.text }}
            </a-select-option>
          </a-select>
          下单日期：
          <div class="MainTopActionThree">
            <a-range-picker
              style="width: 300px"
              :ranges="dataRange"
              :show-time="false"
              format="YYYY-MM-DD"
              @change="onDateChange"
            />
          </div>
        </div>
        <div style="display:flex;">
          <el-input placeholder="输入订单信息模糊搜索" v-model="keyword" @input="clearFn" @keyup.enter.native="searchList" clearable ></el-input>
          <el-button style="margin-left:10px;" type="primary" @click="searchList">搜索</el-button>
        </div>
      </div>
      <a-tabs :activeKey="delivery_type" @change="selectDeliveryType">
        <a-tab-pane :key="1" tab="平台配送"></a-tab-pane>
        <!-- <a-tab-pane :key="2" tab="自提订单" force-render></a-tab-pane> -->
      </a-tabs>
      <div v-if="!dataList.length" style="padding:40px 0;"><a-empty :image="simpleImage" /></div>
      <div class="orderList" v-else>
        <div class="orderItem" v-for="(item,index) in dataList" :key="index">
          <div class="top" style="margin-bottom:15px;">
            <a-checkbox :checked="item.checked" @change="onChangeCheck(item.checked,index)" style="margin-right:5px;"></a-checkbox>
            {{item.create_time}}
            <span style="margin-left:50px;">订单编号：{{item.order_no}}</span>
            <!-- <span style="margin-left:50px;">获得积分：360000积分</span> -->
          </div>
          <div class="bottom">
            <div class="left">
              <img :src="item.product_list[0].logo" alt="" />
              <div class="shopInfo">
                <p>商品：{{item.num}}件</p>
                <p style="margin: 8px 0">
                  客户：{{item.nickname}}
                </p>
                <p>来源：APP商城</p><!-- /PC商城 -->
              </div>
            </div>
            <div class="right">
              <div class="item">
                ￥{{item.sale_price}}
                <p>订单总价</p>
              </div>
              <!-- <div class="item">
                ￥24000.00
                <p>信息费</p>
              </div> -->
              <div class="item" v-if="delivery_type == 1">
                <span>{{item.status==0?'已取消':item.status==1?'待付款':item.status==2?'待发货':item.status==3?'待收货':item.status==4?'已完成':''}}</span>
                <p>订单状态</p>
              </div>
              <div class="item" v-else>
                <span>{{item.status==0?'已取消':item.status==1?'待付款':item.status==2?'待发货':item.status==3?'待核销':item.status==4?'已完成':''}}</span>
                <p>订单状态</p>
              </div>
              <a-button type="primary" @click="toDetails(item.id)">订单详情</a-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="fenye">
        <div>
          <a-checkbox :checked="checkAll" style="margin-right:10px;" @change="onChangeCheckAll">全选</a-checkbox>
          <!-- <a-popconfirm placement="bottom" ok-text="删除" cancel-text="取消" @confirm="DeleteOrder">
              <template slot="title">
                  <p>警告</p>
                  <p>此操作将永久删除该文件, 是否继续?</p>
              </template>
              <a-button type="danger" icon="delete" :disabled="disabledCheck">删除选中</a-button>
          </a-popconfirm> -->
        </div>
        <a-pagination size="small" v-model="page" :pageSize.sync="pagesize" @change="changePage" @showSizeChange="changePagesize" :total="total" show-size-changer show-quick-jumper />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { ACCESS_TOKEN, USER_DATA } from '@/store/mutation-types';
import { OrderList } from '@/api/api.js';
import { Empty } from 'ant-design-vue';
export default {
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  },
  data() {
    return {
      total:50,
      page:1,
      pagesize:10,
      keyword:'',
      orderStatus: [
        {
          text: "已取消",
          value: "0",
        },
        {
          text: "待付款",
          value: "1",
        },
        {
          text: "待发货",
          value: "2",
        },
        {
          text: "待收货",
          value: "3",
        },
        {
          text: "已完成",
          value: "4",
        },
      ],
      status:undefined,
      delivery_type:1, //tabs配送类型(1平台配送,2到店自取) |
      dataRange: {
        今天: [this.$moment().startOf("day"), this.$moment()],
        昨天: [
          this.$moment().startOf("day").subtract(1, "days"),
          this.$moment().startOf("day").subtract(1, "days"),
        ],
        最近一周: [
          this.$moment().startOf("day").subtract(1, "weeks"),
          this.$moment(),
        ],
        最近两周: [
          this.$moment().startOf("day").subtract(2, "weeks"),
          this.$moment(),
        ],
        最近1个月: [
          this.$moment().startOf("day").subtract(1, "months"),
          this.$moment(),
        ],
        最近3个月: [
          this.$moment().startOf("day").subtract(3, "months"),
          this.$moment(),
        ],
        最近半年: [
          this.$moment().startOf("day").subtract(6, "months"),
          this.$moment(),
        ],
        最近1年: [
          this.$moment().startOf("day").subtract(1, "years"),
          this.$moment(),
        ],
      },
      StartDate: "", //开始时间
      EndDate: "", //结束时间
      dataList:[], //订单列表数据
      DateAll:[],//开始和结束时间一起
      checkAll:false, // 全选状态
    };
  },
  mounted() {
    this.GetList()
  },
  computed:{
    disabledCheck(){
      let checkArr = this.dataList.filter(item=>item.checked);
      if(checkArr.length){
        return false
      }else{
        return true
      }
    }
  },
  methods: {
    // 选择tabs
    selectDeliveryType(e){
      const that = this;
      that.delivery_type = e;
      that.page = 1;
      that.pagesize = 10;
      that.status = undefined;
      that.GetList();
      if(that.delivery_type == 1){
        that.orderStatus = [
          {
            text: "已取消",
            value: "0",
          },
          {
            text: "待付款",
            value: "1",
          },
          {
            text: "待发货",
            value: "2",
          },
          {
            text: "待收货",
            value: "3",
          },
          {
            text: "已完成",
            value: "4",
          },
        ]
      }else{
        that.orderStatus = [
          {
            text: "已取消",
            value: "0",
          },
          {
            text: "待付款",
            value: "1",
          },
          {
            text: "待发货",
            value: "2",
          },
          {
            text: "待核销",
            value: "3",
          },
          {
            text: "已完成",
            value: "4",
          },
        ]
      }
    },

    // 选择订单状态
    handleChange(e){
      const that = this;
      that.status = e
      that.page = 1
      that.pagesize = 10
      that.GetList()
    },
    //选择时间
    onDateChange(dates, dateStrings) {
      const that = this;
      // that.StartDate = dateStrings[0];
      // that.EndDate = dateStrings[1];
      if(dateStrings[0]){
        that.DateAll = dateStrings
      }else{
        that.DateAll = []
      }
      that.page = 1;
      that.pagesize = 10
      that.GetList()
      // console.log('From: ', dates[0], ', to: ', dates[1]);
      // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
    },

     // 搜索按钮
    searchList(){
      const that = this;
      that.pageno = 1;
      that.pagesize = 10;
      that.GetList()
    },
    // 清空输入框
    clearFn(){
      const that = this;
      if(!that.keyword){
        that.pageno = 1;
        that.pagesize = 10;
        that.GetList()
      }
    },
    // 获取订单列表
    async GetList(){
      const that = this;
      const user = Vue.ls.get(USER_DATA);
      that.checkAll = false;
      let params = {
        store_id:user.identityId,
        keyword:that.keyword,
        status:that.status,
        // delivery_type:that.delivery_type,
        page:that.page,
        pagesize:that.pagesize,
        create_time:that.DateAll.length>0?that.DateAll.join(','):'',
      }
      let res = await OrderList(params)
      if(res.data.code == 1){
        let data = res.data.data;
        data.list.forEach(item => {
          item.checked = false
          item.create_time = that.$moment(item.create_time * 1000).format('YYYY-MM-DD  HH:mm:ss');
        });
        that.dataList = data.list;
        console.log(that.dataList,'/////');
        that.total = data.count;
      }
    },

    // 勾选单个
    onChangeCheck(check, index){
      const that = this;
      if(check){
        that.dataList[index].checked = false
      }else{
        that.dataList[index].checked = true
      }
      that.checkAll = that.dataList.every(item=>item.checked)
    },
    // 勾选全选
    onChangeCheckAll(){
      const that = this;
      that.checkAll = !that.checkAll;
      console.log(that.checkAll);
      that.dataList.map(item=>item.checked = that.checkAll)
    },

    // 订单详情
    toDetails(id){
      const that = this;
      that.$router.push({name:'orderDetails',query:{id}})
    },

    // 删除订单
    DeleteOrder(){

    },

    // 分页
    changePage(page,pagesize){
      console.log(page,pagesize);
      const that = this;
      that.page = page
      that.GetList()
    },
    changePagesize(current,size){
      console.log(current,size);
      const that = this;
      that.pagesize = size
      that.GetList()
    }
  },
};
</script>

<style scoped lang="stylus">
.editable-row-operations a {
  margin-right: 12px;
}
.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }
  .MainTitle:before {
    content: '';
    width: 40px;
    height: 12px;
    background: linear-gradient(270deg, rgba(0, 158, 238, 0) 0%, rgba(0, 158, 238, 0.3) 100%);
    position: absolute;
    bottom: 2px;
    left: 0;
  }
  .MianContent {
    padding: 10px 20px 20px 20px;
    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .MainTopActionView {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .MainTopActionOne {
          margin-right: 30px;
          span {
            margin-right: 20px;
          }
        }
        .MainTopActionTwo {
          span {
            margin-right: 20px;
          }
        }
      }
      .MainTopActionThree {
        display: flex;
        align-items: center;
        margin-left: 20px;
      }
    }
  }
  // 订单列表
  .orderList {
    .orderItem {
      padding: 20px 0;
      border-bottom: 1px solid #EEEEEE;
      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          img {
            width: 60px;
            height: 60px;
            flex-shrink: 0;
            margin-right: 15px;
          }
          p {
            margin: 0;
            font: 400 12px / 16px Microsoft YaHei;
          }
        }
        .right {
          display: flex;
          align-items: center;
          .item{
            margin-right:100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            p{
              margin: 0;
            }
            span{
              color:#FEAE4D;
            }
          }
        }
      }
    }
  }
  // 分页
  .fenye{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
  }
}
</style>